<!-- 网络请求 -->
<template>
    <div class="doc-content-wrapper">
        <div class="doc-content-container">
            <div class="doc-content">
                <h1 class="text-4xl mb-6">网络请求</h1>

                <h2 class="mb-5 flex items-center"><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function" target="_blank">async/await方法</a><el-tag class="ml-2">ES2017</el-tag></h2>
                <p class="mb-3 text-base">async 函数是使用async关键字声明的函数。async 函数是 AsyncFunction 构造函数的实例，并且其中允许使用 await 关键字。async 和 await 关键字让我们可以用一种更简洁的方式写出基于 Promise 的异步行为，而无需刻意地链式调用 promise。</p>
                <Codemirror :code="asyncCode" name="async/await" class="mb-10" />


            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    setup () {
        const asyncCode = ref(`function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // Expected output: "resolved"
}

asyncCall();`)

        return {
            asyncCode
        }
    }
})
</script>

<style scoped>

</style>